<template>
	<view>
		<!-- 头部标题 -->
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-green">抢答发布</text>
				<text class="bg-green"></text>
				<!-- last-child选择器-->
			</view>
		</view>
		<!-- 头部标题 end -->
		
		
		<!-- 内容 -->
		<view class="cu-form-group ">
			<view class="title">抢答人数</view>
			<picker @change="PickerChange" :value="picker_index" :range="picker">
				<view class="picker">
					{{picker_index>-1?picker[picker_index]:'人数'}}
				</view>
			</picker>
		</view>
		<!-- end -->
		
		<!-- 抢答人数 -->
		<view class="">
			<view class="bg-white" style="width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
				<text style="font-size: 35upx;font-weight: 550;">老师开起了抢答功能，赶快来答题吧~~~</text>
				<text style="font-size: 35upx;font-weight: 550;margin-top: 20upx;">本次答题人数为2人</text>
			</view>
			
			<view class="bg-white padding-top" style="display: flex;justify-content: space-around;">
				
				<view class="bg-white" style="display: flex;justify-content: space-around;" :key="index" v-for="(item,index) in dataList">
				
					<view class="" style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
						<image :src="'http://39.96.88.209:8080'+item.headImg" style="border-radius: 100%;height: 200upx;width: 200upx;margin-top: 10upx;"
						 mode=""></image>
						<text style="font-weight: 550;">{{item.uname}}</text>
					</view>
				
				</view>
				
			</view>
			
		</view>
		<!-- end -->
		
		<!-- 提交 -->
		<view class="padding-xl">
			<button  @click.native="make()" class="cu-btn block bg-gradual-green margin-tb-sm lg">
				<text :class="  statusButton ? 'cuIconfont-spin cuIcon-loading2' : 'cuIconfont-spin' "></text> {{statusButton ? '发布中...' : '发布'}}
				</button>
		</view>
		
		
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				statusButton:false,//按钮状态(是否正在提交中...)
				picker: ['1人', '2人'],
				picker_index: 0,//抢答人数
				classId:"",//课堂id
				dataList:[],
				timeTaskId:0,
				workId:0
			}
		},
		onHide() {
			clearInterval(this.timeTaskId)
		},
		methods: {
			PickerChange(e) {
				this.picker_index = e.detail.value
			},
			
			// 发布
			make(){
				
				if(_this.statusButton){
					return;
				}
				
				_this.statusButton = true //开启发布
				console.log(_this.classId);
				uni.request({
					url:_this.api + "answer/create",
					method:"POST",
					header:{
						"content-type":"application/x-www-form-urlencoded"
					},
					data:{
						clazzId	: _this.classId,
						maxNum:_this.picker_index + 1
					},
					success: (res) => {
						_this.statusButton = false //开启发布
						console.log(res)
						if(res.data.code == 200){
							_this.workId = res.data.data.id
							uni.showToast({
								title:res.data.message,
								icon:"success",
								duration:1000
							})
							_this.timeTaskId=setInterval(function(){
								_this.getAnswerIsOpen()
							},2000)
							// 开始获取抢答用户
							
							
							
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							})
						}
						
					
						console.log(res)
					},
					fail: (err) => {
						uni.showToast({
							title:"发布失败！请稍后在试~~",
							icon:"none",
							duration:1000
						})
					}
				})
			},
			//获取成功用户
			getAnswerIsOpen: function() {
				var _this = this
			
				
				// 发布
				uni.request({
					url: _this.api + "answer/getlist",
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					data: {
						id: this.workId
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							_this.status = true
							_this.dataList = res.data.data
							console.log(res.data.data)
						} else {
							_this.status = false
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "none"
							})
						}
					},
					fail: (err) => {
			
					}
				})
			
			}
		},
		onLoad(optin) {
			_this = this;
			_this.classId = optin.classId
			console.log(optin.classId)
			
			// _this.timeTaskId =  setInterval(function(){
			// 	_this.getAnswerIsOpen();	
			// },2000);
			
		},
		onBackPress() {
			clearInterval(this.timeTaskId)
		}
	}
</script>

<style>

</style>
